@namespace BulmaRazor.Components
@inherits BulmaComponentBase
@typeparam TValue

<div id="@Id" @attributes="Attributes" class="@classes">
    <div class="@tagsInputCls" @onclick="()=>Toggle()" @onclick:stopPropagation>

        @if (IsMultiple)
        {
            if (IsCollapseTags)
            {
                if (SelectedList.Any())
                {
                    <span class="@GetTagCls()">
                        @GetText(SelectedList.FirstOrDefault())
                        <i class="delete is-small" @onclick="() => Remove(SelectedList.FirstOrDefault())" @onclick:stopPropagation></i>
                    </span>
                }
                if (SelectedList.Count > 1)
                {
                    <span class="@GetTagCls()">
                        + @(SelectedList.Count - 1)
                    </span>
                }
            }
            else
            {
                foreach (var item in SelectedList)
                {
                    <span class="@GetTagCls()">
                        @GetText(item)
                        <i class="delete is-small" @onclick="() => Remove(item)" @onclick:stopPropagation></i>
                    </span>
                }
            }
        }
        else if (SelectedList.Any())
        {
            <span class="tag tag-label">
                @GetText(SelectedList.FirstOrDefault())
            </span>
        }
        @if (!SelectedList.Any())
        {
            <span class="tag placeholder">
                @Placeholder
            </span>
        }

    </div>

    <div class="@B.FlexShrink0">
        <div class="@dropDownCls" @onclick:stopPropagation>
            @RenderUL(dataView)

            @{ var parent = dataView.FirstOrDefault(x => x.IsExpanded && x.Children.Any()); }
            @while (parent != null)
            {
                @:@RenderUL(parent.Children)
                parent = parent.Children.FirstOrDefault(x => x.IsExpanded && x.Children.Any());
            }

        </div>

        @if (Clearable && SelectedList.Any())
        {
            <span class="drop-icon icon @B.TextGreyLight @B.Clickable" @onclick="ClearSelectedNodes" @onclick:stopPropagation>
                <i class="fa fa-times-circle"></i>
            </span>
        }
        else
        {
            <span class="drop-icon icon @B.Clickable" @onclick="()=>Toggle()" @onclick:stopPropagation>

                <i class="fa @(isShow ? "fa-angle-up" : "fa-angle-down")"></i>
            </span>
        }
    </div>

</div>

@code {

    RenderFragment<IEnumerable<CascaderItem<TValue>>> RenderUL => list =>
        @<ul class="cascader-item">
            @foreach (var item in list)
            {
                <li class="@GetItemCls(item)" @onclick="() => SelectOne(list, item)" @onclick:stopPropagation>
                    @if (IsMultiple)
                    {
                        var cked = GetItemChecked(item);
                        <IconCheckBox Color="Color" class="@GetCheckCls(item)" Checked="@cked" OnChange="(v) => Check(item,v)"></IconCheckBox>
                    }
                    @if (IsIsolated && !IsMultiple)
                    {
                        <IconRadio Color="Color" Checked="@item.IsChecked" @onclick="() => CheckRadio(item)"></IconRadio>
                    }
                    <span class="cascader-label">
                        @if (ItemSlot != null)
                        {
                            @:@ItemSlot(item)
                        }
                        else
                        {
                            @:@item.Text
                        }
                    </span>
                    @if (item.Children.Any())
                    {
                        <span class="icon">
                            <i class="fa fa-angle-right"></i>
                        </span>
                    }
                </li>
            }
        </ul>;

}